<template>
	<view class="details_box">
		<bottom-rect type="normal"></bottom-rect>

		<view class="content_box" v-show="isLoaded">
			<view class="images_top">
				<image :src="pageData.image[0]" @click="preview_image" mode="aspectFill"></image>
			</view>
			<view class="content_info">
				<!-- 标题 -->
				<view>
					<!-- 捡到 -->
					<!-- 校园卡或者身份证 -->
					<text class="title main-font-color font-weight-bold"
						v-if="pageData.type == '校园卡' || pageData.type == '身份证'">捡到了{{pageData.student_name}}的{{pageData.type}},请及时取回！</text>
					<!-- 电影卡 -->
					<text class="title main-font-color font-weight-bold"
						v-else-if="pageData.type == '电影卡'">捡到了尾号为{{utils.substring(pageData.movie_card_No, 8)}}的{{pageData.type}},请及时取回！</text>
					<!-- 银行卡 -->
					<text class="title main-font-color font-weight-bold"
						v-else-if="pageData.type == '银行卡'">捡到了尾号为{{utils.substring(pageData.bank_card_No, 15)}}的{{pageData.bank_card_name}}卡,请及时取回！</text>
					<!-- 其它 -->
					<text class="title main-font-color font-weight-bold"
						v-else-if="pageData.type == '其它' && pageData.tags== 'lost'">捡到了{{pageData.item_name}},请及时取回！</text>
					<!-- 寻找 -->
					<!-- 其它 -->
					<text class="title main-font-color font-weight-bold"
						v-else-if="pageData.type == '其它' && pageData.tags== 'found'">弄丢了{{pageData.item_name}},请大家找到后联系我，谢谢！</text>
				</view>
				<!-- 物品详情 -->
				<view class="details_info text main-font-color font-weight-bold" v-if="pageData.type == '其它'">
					<text class="sub_title">物品详情:</text>
					<text class="content">{{pageData.description}}</text>
				</view>
				<!-- 拿去地点 -->
				<view class="place text main-font-color font-weight-bold">
					<text class="sub_title" v-if="pageData.tags == 'lost'">取回地点:</text>
					<text class="sub_title" v-if="pageData.tags == 'found'">丢失地点:</text>
					<text class="content">{{pageData.location}}</text>
				</view>
				<!-- 联系方式 -->
				<view class="contact text main-font-color font-weight-bold">
					<text class="sub_title">联系方式:</text>
					<text class="content" @click="set_clipboard_data">{{pageData.contact_way}}
						<text style="font-size: 36rpx;color: #999999;font-weight: normal;">(点击复制)</text>
					</text>
				</view>
			</view>
			<view class="user_info">
				<!-- 用户头像和信息 -->
				<view class="user_box">
					<view class="avatar">
						<image :src="pageData.avatarUrl" mode="aspectFill"></image>
					</view>
					<text class="font-weight-bold">{{pageData.nickname}}</text>
				</view>
				<!-- 发布时间 -->
				<text class="font-weight-bold">{{utils.myDate(pageData.post_time, 2)}}</text>
			</view>

			<view class="chat_btn" hover-class="btn-click" @click="getuserProfile" v-if="own_UID != pageData.UID">
				<image src="/subpkg/detailsPage/static/chat123.png" mode="aspectFill"></image>
				<text>私聊沟通</text>
			</view>
		</view>
	</view>
</template>

<script module="utils" src="@/wxcomponents/wxs/utils.wxs" lang="wxs"></script>
<script>
	import bottomRect from '@/components/bottomRect/bottomRect.vue'

	import {
		mapState
	} from 'vuex'
	
	const app = getApp()

	export default {
		name: 'details',
		components: {
			bottomRect
		},
		data() {
			return {
				// TIM的登录页面的data数据
				// 搜索的人员
				searchUser: {},

				// 页面获取的数据
				pageData: {},
				// 是否完成加载
				isLoaded: false,
				own_UID:'',
			};
		},
		computed: {
			...mapState({
				// 聊天室的登录转状态,默认状态为false
				isSDKReady: state => state.isSDKReady
			})
		},
		methods: {
			// 去聊天室
			getuserProfile() {
				if (this.isSDKReady) {
					uni.$TUIKit.getUserProfile({
						userIDList: [this.pageData.userID]
					}).then(imRes => {
						this.setData({
							searchUser: imRes.data[0]
						});
						uni.navigateTo({
							url: `/subpkg/tim/TUI-Chat/chat?conversationID=C2C${this.searchUser.userID}`
						});
						uni.hideLoading()
					});
				} else {
					console.log('SDK没准备好');
				}
			},

			// 复制
			set_clipboard_data() {
				uni.setClipboardData({
					data: this.pageData.contact_way
				})
			},

			// 预览图片
			preview_image() {
				uni.previewImage({
					urls: this.pageData.image
				})
			},

			// 获取页面数据
			get_details_info(_id) {
				uni.showLoading({
					title: '加载中...'
				})
				wx.cloud.callFunction({
					name: 'get_details_info',
					data: {
						_id
					}
				}).then(res => {
					console.log(res);
					this.pageData = res.result.data
					this.isLoaded = true
					uni.hideLoading()
				})
			}
		},

		onLoad(options) {
			this.own_UID = app.globalData.userInfo.profile.student_ID
			this.get_details_info(options._id)
		}
	}
</script>

<style scoped lang="scss">
	.details_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F7F7F7;
		width: 100vw;
		height: 100vh;

		.content_box {
			width: 700rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 8px #b8b8b8;
			box-sizing: border-box;
			background-color: white;
			margin-top: -90rpx;
			margin-bottom: 50rpx;
			overflow: hidden;

			// 顶部图片
			.images_top {
				width: 100%;
				height: 400rpx;
				overflow: hidden;
				border-radius: 20rpx;

				image {
					width: 100%;
				}
			}

			// 下方内容
			.content_info {
				padding: 26rpx;
				width: 100%;
				box-sizing: border-box;
				// margin-bottom: 20rpx;

				.title {
					font-size: 40rpx;
				}

				.text {
					display: flex;
					font-size: 36rpx;
					margin: 30rpx 0;

					.sub_title {
						flex: 2.8;
					}

					.content {
						flex: 7.2;
					}
				}
			}

			// 下方用户等信息
			.user_info {
				box-sizing: border-box;
				width: 100%;
				padding: 10rpx 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50rpx;

				.user_box {
					display: flex;
					align-items: center;

					.avatar {
						width: 60rpx;
						height: 60rpx;
						overflow: hidden;
						border-radius: 50%;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				text {
					color: #999999;
					font-size: 28rpx;
				}
			}

			.chat_btn {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #007aff;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 30rpx;
					color: white;
				}
			}
		}
	}
</style>
